<template>
  <div class="mini-trend-chart">
    <svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`">
      <!-- 背景网格线 -->
      <defs>
        <pattern id="grid" width="10" height="6" patternUnits="userSpaceOnUse">
          <path d="M 10 0 L 0 0 0 6" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect :width="width" :height="height" fill="url(#grid)" />
      
      <!-- 趋势线 -->
      <polyline
        v-if="pathPoints"
        :points="pathPoints"
        fill="none"
        :stroke="trendColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      
      <!-- 数据点 -->
      <circle
        v-for="(point, index) in points"
        :key="index"
        :cx="point.x"
        :cy="point.y"
        r="1.5"
        :fill="trendColor"
        opacity="0.8"
      />
      
      <!-- 最新值高亮 -->
      <circle
        v-if="points.length > 0"
        :cx="points[points.length - 1].x"
        :cy="points[points.length - 1].y"
        r="2"
        :fill="trendColor"
        stroke="rgba(255,255,255,0.8)"
        stroke-width="1"
      />
    </svg>
    
    <!-- 趋势指示器 -->
    <div class="trend-indicator" :class="trendClass">
      <span class="trend-arrow">{{ trendDirection }}</span>
      <span class="trend-text">{{ trendText }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  width: {
    type: Number,
    default: 100
  },
  height: {
    type: Number,
    default: 30
  }
})

// 计算数据点坐标
const points = computed(() => {
  if (!props.data || props.data.length === 0) return []
  
  const values = props.data.map(d => d.value)
  const minValue = Math.min(...values)
  const maxValue = Math.max(...values)
  const range = maxValue - minValue || 1 // 避免除以0
  
  return props.data.map((item, index) => {
    const margin = Math.min(props.width * 0.05, 5) // 边距为宽度的5%，最小5像素
    const x = (index / (props.data.length - 1)) * (props.width - margin * 2) + margin
    const y = (props.height - margin) - ((item.value - minValue) / range) * (props.height - margin * 2)
    return { x, y, value: item.value, date: item.date }
  })
})

// 生成路径点字符串
const pathPoints = computed(() => {
  if (points.value.length === 0) return ''
  return points.value.map(p => `${p.x},${p.y}`).join(' ')
})

// 计算趋势方向和颜色
const trendDirection = computed(() => {
  if (props.data.length < 2) return '='
  const firstValue = props.data[0].value
  const lastValue = props.data[props.data.length - 1].value
  if (lastValue > firstValue) return '↗'
  if (lastValue < firstValue) return '↘'
  return '→'
})

const trendClass = computed(() => {
  const direction = trendDirection.value
  if (direction === '↗') return 'trend-up'
  if (direction === '↘') return 'trend-down'
  return 'trend-stable'
})

const trendColor = computed(() => {
  const direction = trendDirection.value
  if (direction === '↗') return '#ff6b6b' // 上升用红色
  if (direction === '↘') return '#00d4aa' // 下降用绿色
  return '#29d9d5'
})

const trendText = computed(() => {
  const direction = trendDirection.value
  if (direction === '↗') return '上升'
  if (direction === '↘') return '下降'
  return '平稳'
})
</script>

<style scoped>
.mini-trend-chart {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mini-trend-chart_ver {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
}

.trend-up {
  color: #ff6b6b; /* 上升用红色 */
}

.trend-down {
  color: #00d4aa; /* 下降用绿色 */
}

.trend-stable {
  color: #29d9d5;
}

.trend-arrow {
  font-size: 12px;
  font-weight: bold;
}

.trend-text {
  opacity: 0.9;
}

svg {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
